<template>
    <section>
        <img src="https://pic2.zhimg.com/v2-6d8354388fcf88ce0c4d7e3b786e66f6_r.jpg" class="bg" width="100%" height="100%">
        <div class="wrapper">

            <div id="building"
                style="margin: 200px auto;background-color: #ffffff; width: 350px; height: 300px; padding: 20px; border-radius: 10px">
                <div style="margin: 20px 0; text-align: center;font-size: 24px"><b>登 录</b></div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    :size="formSize" status-icon>
                    <div class="juzhong">
                        <el-form-item label="用户名" prop="name" margin-left=-180px>
                            <el-input v-model="ruleForm.name" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone" margin-left=-180px>
                            <el-input v-model="ruleForm.phone" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="ruleForm.password" />
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            创建
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import router from '@/router';


interface RuleForm {
    name: string,
    password: string

}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    password: ''

})
const go = () => {
    router.push('/register')

}
const userlist = ref([])
onMounted(() => {
    axios.get('../../../public/user.json').then((res) => {
        userlist.value = res.data.userlist;
    })
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度应该在3-10位', trigger: 'blur' },
    ], password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 10, message: '长度应该在3-10位', trigger: 'blur' },
    ], phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '长度应该在11位', trigger: 'blur' },
    ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //获取JSON数据

            //对获取的数据进行遍历，如果表单中的用户名和密码和数据能够完全匹配，则可以进行登录跳转
            let flag = userlist.value.some(v => v.name == ruleForm.name && v.password == ruleForm.password)
            if (flag == false) {
                alert("用户名或密码错误")
                formEl.resetFields()//如果错误则清空文本框
            }
            else {
                sessionStorage.setItem('username', ruleForm.name)
                router.push('/')
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<style scoped>
.el-header {
    background-color: bisque;
    height: 60px;
    /* 垂直居中 */
    line-height: 50px;
}

.el-main {
    background-color: rgb(43, 174, 226);
    height: 190px;
    margin-left: -80px;
}



.el-container {
    margin: auto;
    margin-top: 10%;
    text-align: center;

}

.container {
    width: 300px;
    margin: auto;
}

.wrapper {
    /*渐变的背景色*/
    /*height: 100vh;  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);  overflow: hidden;*/
    /*背景图*/
    background: url("../assets/login-background.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
}

#building {
    /*设置透明度，0为完全透明，1为不透明*/
    opacity: 0.75;
}

section .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.juzhong {
    margin-left: -50px;
}
</style>